<template>
    <div class="sider" ref="sider" style="margin-top:-120px;">
        <img src="../assets/banner.jpg" style="width:100%;"/>
    </div>
</template>
<script>
    export default {
        data() {
            return {};
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                var sider = this.$refs["sider"];
                if (sider) {
                    jv.await(300,4,() => {
                        var prev = sider.previousElementSibling;
                        if (prev) {
                            var prevPos = prev.getBoundingClientRect();
                            var prevStyle = getComputedStyle(prev)  ;
                            var prevMargin = parseInt(prevStyle.marginTop) + parseInt(prevStyle.marginBottom);
                            sider.style.cssText += ";margin-top:" + (0 - prevPos.height - prevMargin) + "px;";
                        }
                    });
                }
            }
        }
    }

</script>
<style>
    .sider {
        margin-top: -120px;
    }

    @media screen and (max-width: 40rem) {
        .sider {
            display: none;
        }
    }
</style>
